<!--已分配的目标用户管理-->
<template>
  <div>

    <Row style="text-align: right" class="y_query_right">
      <Button type="error" :disabled="!hasSelectItems" icon="trash-b" class="tiy_btn"
              @click="batchSetStateInvalid">批量设置无效
      </Button>
      <Button type="info" style="margin-right: 10px" icon="md-hand" @click="showAssignModal" :disabled="!hasSelectItems" v-has=tRole.OPERATIONS_3_102 >分配</Button>
    </Row>

    <Row style="padding-top: 10px;text-align: left">
      <i-col span="24" class="y_query_right">
        <div v-has=tRole.OPERATIONS_3_101>
<!--          <Input class="form_input" v-model.trim="searchParams.customerName" placeholder="姓名" clearable ></Input>-->
          <Input class="form_input y_condition" v-model.trim="searchParams.number" placeholder="内部编号" clearable></Input>
          <Input class="form_input y_condition" v-model.trim="searchParams.tags" clearable="" placeholder="分类标签"   @on-click="showSearchModal(1)" icon="ios-search-outline" >
          </Input>
          <Input class="form_input y_condition" v-model.trim="searchParams.otherTags" clearable="" placeholder="内部标签"   @on-click="showSearchModal(9)" icon="ios-search-outline" >
          </Input>
          <Select class="form_input y_condition" placeholder="请选择用户状态" v-model="searchParams.state" clearable style="text-align: left;">
            <Option v-for="item in filterStateList" :value="item.value" :key="item.value">{{ item.name }}
            </Option>
          </Select>

          <Checkbox v-model="searchParams.isHasShop" class="y_condition" style="vertical-align: middle;">有独立站 </Checkbox>
          <Button type="primary" style="margin-left: 2rem"  icon="md-search" @click="search" class="y_condition">查询
          </Button>
        </div>
      </i-col>

    </Row>
<!--    <Row style="padding-top: 10px;text-align: left">-->
<!--      <i-col span="24">-->
<!--        <div v-has=tRole.OPERATIONS_3_101>-->
<!--          <span>导入时间:-->
<!--            <DatePicker type="datetime" v-model="searchParams.startTime" format="yyyy-MM-dd HH:mm" style="width: 180px"></DatePicker> - -->
<!--            <DatePicker type="datetime" v-model="searchParams.endTime" format="yyyy-MM-dd HH:mm"  style="width: 180px"></DatePicker>-->
<!--          </span>-->
<!--          <Button type="primary" style="margin-left: 2rem"  icon="md-search" @click="search">查询-->
<!--          </Button>-->
<!--        </div>-->
<!--      </i-col>-->
<!--    </Row>-->

    <!--表格和分页-->
<!--    <Table stripe border ref="userInfo" :columns="tableTitles" :data="userList"
           class="table_css" @on-selection-change="customerSelectedChanged" @on-sort-change="sortChanged"
           no-data-text="暂无分配给当前用户的数据" ></Table>-->
    <div style="text-align: left; margin: 1rem 0 0 25px;">
      <Checkbox v-model="selectedAll" :indeterminate="selectedPart" @on-change="clickSelectAll">全选</Checkbox>
    </div>
    <List border class="data-list">
      <template v-if="userList.length == 0">
        <ListItem class="list-item">
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </template>
      <template v-else>
        <CheckboxGroup v-model="selectedIds">
          <ListItem v-for="(item, index) in userList" :key="index" class="list-item">
            <div class="item-top">
              <Checkbox :label="item.id" :disabled="item.state==300 || item.state == 310"><span></span></Checkbox>
              <KeyValueView title="独立站编号">
                <a v-if="hasAuthority(tRole.OPERATIONS_2_201)" @click="getCustomerDetail(item.id, item.state)">{{item.number}}</a>
                <span v-else>{{item.number}}</span>
              </KeyValueView>
              <KeyValueView title="独立站" v-if="isNotEmpty(item.externalUrl)">
                <Tooltip :content="item.externalUrl" placement="top">
                  <a target="_blank" :href="item.externalUrl">点击访问</a>
                </Tooltip>
              </KeyValueView>
            </div>
            <div class="item-content">
              <KeyValueView title="站内信地址" v-if="isNotEmpty(item.contactUrl)"><a target="_blank" :href="item.contactUrl">点击访问</a></KeyValueView>
              <KeyValueView title="国家" :value="item.country"></KeyValueView>
              <KeyValueView title="邮箱" :value="isNotEmpty(item.externalEmail)?'有':'无'"></KeyValueView>
              <KeyValueView title="负责员工" :value="item.employeeName"></KeyValueView>
              <KeyValueView title="状态" :value="targetCustomerStateDict.filter(element => element.value == item.state)[0].name"></KeyValueView>
            </div>
            <div class="item-bottom">
              <Button type="info" size="small" @click="setExternalEmailShow(item.id, item.state)">信息采集</Button>
              <Button type="primary" size="small" v-has="tRole.OPERATIONS_3_203" @click="setEffective(index)">有效</Button>
              <Button type="error" size="small" v-has="tRole.OPERATIONS_3_202" @click="setStateInvalid(index)">无效</Button>
              <Button type="warning" size="small" v-has="tRole.OPERATIONS_3_205" @click="opRecordShow(index)">操作记录</Button>
            </div>
          </ListItem>
        </CheckboxGroup>
      </template>
    </List>
    <div style="float: right; margin-top: 20px;">

      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60]"
            show-sizer show-elevator/>
    </div>

    <!--扩展信息-->
    <Modal v-model="status.modalEmail.isShow" title="信息维护" :styles="{top: '20px',width:'60%',}"
             :loading="status.modalEmail.isLoading" @on-ok="setExternalEmail()">
<!--      <h4 style="text-align: center" v-if="status.modalEmail.hasName">用户 : {{tParam.customerInfo.customerName}}</h4>-->
      <Form ref="paramCustomer" :model="tParam.customerInfo" :rules="status.ruleCustomer" :label-width="90"
            class="modal_newuser_form">
        <div class="modal_base_div" style="margin-top:0px !important; ">
          <FormItem label="站内信地址 :" prop="contactUrl">
            <Input type="textarea" v-model.trim="tParam.customerInfo.contactUrl" maxlength="600" style="width: 80%" placeholder="请输入站内信地址"></Input>
          </FormItem>
          <Row>
            <i-col span="12">
              <FormItem label="邮箱 :" prop="externalEmail">
                <Input v-model.trim="tParam.customerInfo.externalEmail" style="width: 80%" placeholder="请输入邮箱"></Input>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="站内信 :" prop="isSendLetter" v-if="tParam.customerInfo.state==300 || tParam.customerInfo.state!=500">
                <Checkbox v-model="tParam.customerInfo.isSendLetter" @on-change="onchangeSendLetter" >已发过站内信</Checkbox>
              </FormItem>
            </i-col>


          </Row>

          <FormItem label="网站分类 :" prop="tags">
            <Tag color="success" v-for="(tag,index) in tParam.customerInfo.readonlyTags" >{{tag}}</Tag>
            <Tag color="primary" v-for="(tag,index) in tParam.customerInfo.tags" closable @on-close="deleteTag(index,2)">{{tag}}</Tag>
            <Tag color="error" v-for="(tag,index) in tParam.customerInfo.otherTags" closable @on-close="deleteTag(index,3)">{{tag}}</Tag>
            <Button icon="ios-add" type="dashed" size="small" @click="showTagModal">添加分类</Button>
          </FormItem>

          <FormItem label="推广备注 :" prop="description">
            <Input v-model.trim="tParam.customerInfo.extendInfo.description" type="textarea" :rows="3" :autosize="true" style="width: 80%" placeholder="备注"></Input>
          </FormItem>
          <Row>
            <i-col span="12">
              <FormItem label="Facebook :" prop="facebook">
                <Input v-model.trim="tParam.customerInfo.extendInfo.facebook" maxlength="255" @on-blur="formatContactUrl"  type="textarea" :rows="1"  placeholder="facebook" style="width: 90%" ></Input>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="Twitter :" prop="twitter">
                <Input v-model.trim="tParam.customerInfo.extendInfo.twitter" maxlength="255" type="textarea" :rows="1" placeholder="twitter" style="width: 90%" ></Input>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="Instagram :" prop="instagram">
                <Input v-model.trim="tParam.customerInfo.extendInfo.instagram" maxlength="255" type="textarea" :rows="1" placeholder="instagram" style="width: 90%" ></Input>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="Pinterest :" prop="pinterest">
                <Input v-model.trim="tParam.customerInfo.extendInfo.pinterest" maxlength="255"  type="textarea" :rows="1" placeholder="pinterest" style="width: 90%" ></Input>
              </FormItem>
            </i-col>
          </Row>

          <Row style="display: flex;flex-direction: column;justify-content: center">
            <div class="">联系地址 :  <Button type="info" ghost @click="addContact()" icon="md-add" style="margin-left: 1rem">新增联系地址
            </Button> </div>
            <div style="">
              <List >
              <ListItem v-for="(item,index) in tParam.customerInfo.contacts" >
                <ListItemMeta >
                  <div slot="title"><span v-text="item.country"></span> <span v-text="item.postalCode"></span></div>
                  <div slot="description">
                    <div><span v-text="'phone: '+item.phone"></span></div>
                    <span v-text="item.address"></span></div>
                </ListItemMeta>
                <template slot="action" style="flex-grow: 2">
                  <li>
                    <a href="javascript:void(0)" @click="editContact(index)">Edit</a>
                  </li>
                  <li>
                    <a href="javascript:void(0)" @click="deleteContact(index)">Delete</a>
                  </li>
                </template>
              </ListItem>
              </List>
            </div>
          </Row>
        </div>

      </Form>
    </Modal>
    <Modal v-model="status.modalContact.isShow" title="联系地址" :styles="{top: '20px',width:'60%',}"
            @on-ok="applyContact" :loading="status.modalContact.isLoading">
      <Form ref="paramContact" :model="tParam.contact" :label-width="90"
            class="modal_newuser_form" >
        <div class="modal_base_div" style="margin-top:0px !important; ">
          <FormItem label="国家 :" prop="country" >
            <Input type="text" v-model.trim="tParam.contact.country" placeholder="请输入国家" style="width: 80%"></Input>
          </FormItem>
          <FormItem label="邮编 :" prop="phone">
            <Input v-model.trim="tParam.contact.postalCode" style="width: 80%" placeholder="请输入邮编"></Input>
          </FormItem>
          <FormItem label="联系电话 :" prop="phone">
            <Input v-model.trim="tParam.contact.phone" style="width: 80%" placeholder="请输入手机号"></Input>
          </FormItem>
          <FormItem label="详细地址 :" prop="address">
            <Input type="textarea" v-model.trim="tParam.contact.address" style="width: 80%" placeholder="详情地址"></Input>
          </FormItem>
        </div>
      </Form>
    </Modal>


    <!--操作记录-->
    <Modal v-model="status.modalopRecord.isShow" title="操作记录"
             :loading="status.modalEmail.isLoading"
           :styles="{top: '20px',bottom:'20px',width:'70%'}">

      <h4 style="margin: 1rem 0rem">添加操作记录:</h4>
      <Row style="margin-top: 8px">
        <i-col span="6"><Select class="form_input" placeholder="选择操作" v-model.trim="tParam.opRecordSave.customerOperation"
                                clearable>
          <Option v-for="item in customerFilterOperation" :value="item.value" :key="item.value">{{ item.name }}</Option>
        </Select></i-col>
        <i-col span="8"><Input type="textarea" :autosize="true" v-model.trim="tParam.opRecordSave.operationDesc"
                                style="width: 90%" placeholder="操作说明"></Input></i-col>
        <i-col span="10">
          <Date-picker type="datetime"  v-model="tParam.opRecordSave.operationTime" placeholder="选择日期"
                       style="width: 200px"></Date-picker>
          <Button type="primary" icon="trash-b" class="tiy_btn" style="margin-left: 1rem"
                  @click="saveCustomerOpRecord()">
            添加记录
          </Button>
        </i-col>
      </Row>

      <h4 style="margin: 1rem 0rem">历史操作记录:</h4>
      <Steps :current="0"  direction="vertical">
        <Step :title="item.operationStr " :content="prepareRecord(item)" v-for="item in opRecordList"></Step>

      </Steps>
    </Modal>

    <!--用户详情-->
    <Modal v-model="status.modalCustomerInfo.isShow" :title="'用户详情'">
      <Row>
        <i-col span="12">
          <span class="tiy_key">用户名 :</span> {{customerDetail.customerName}}
        </i-col>
      </Row>

      <Row>
        <i-col span="12">
          <span class="tiy_key">用户来源 :</span> {{customerDetail.channel}}
        </i-col>
        <i-col span="12">
        <span class="tiy_key">头像图标 : </span>
        <Avatar :src="customerDetail.avatar" size="large"/>
        </i-col>
      </Row>

      <Row v-if="tParam.customerInfo.externalUrl!=''&&tParam.customerInfo.externalUrl!=null">
        <span class="tiy_key">个人主页 :</span>
        <span v-text="tParam.customerInfo.externalUrl"></span>
      </Row>
      <Row v-if="tParam.customerInfo.externalEmail!=''&&tParam.customerInfo.externalEmail!=null">
        <span class="tiy_key">扩展邮箱 :</span>
        <span v-text="tParam.customerInfo.externalEmail"></span>
      </Row>
      <Row v-if="tParam.customerInfo.extendInfo.followingCount!=0">
        <i-col span="11">
            <span class="tiy_key">粉丝数 :</span>
            <span v-text="tParam.customerInfo.extendInfo.followerCount"></span>
        </i-col>
        <i-col span="11">
          <span class="tiy_key">关注数 :</span>
          <span v-text="tParam.customerInfo.extendInfo.followingCount"></span>
        </i-col>
      </Row>
      <Row><span class="tiy_key">用户备注 :</span>{{customerDetail.extendInfo.description}}</Row>

      <div class="modal_base_div" style="margin-top:0px !important; ">
        <div class="modal_base_div_title"><strong>独立站信息</strong></div>
        <Row style="display:flex"><span class="tiy_key">标题 :</span> <span style="padding: 0.5rem 0rem;" v-text="customerDetail.extendInfo.title" ></span></Row>
        <Row style="display:flex"><span class="tiy_key">描述 :</span> <span style="padding: 0.5rem 0rem;">{{customerDetail.extendInfo.siteDesc}}</span></Row>
        <Row><span class="tiy_key">网站排名 :</span> <span>{{customerDetail.extendInfo.alexa}}</span></Row>
        <Row v-if="tParam.customerInfo.extendInfo.extra!=''&&tParam.customerInfo.extendInfo.extra!=null">
          <span class="tiy_key">网站扩展信息 :</span> <span>{{tParam.customerInfo.extendInfo.extra}}</span></Row>

        <Row v-if="customerDetail.extendInfo.facebook!=''&&customerDetail.extendInfo.facebook!=null"><span class="tiy_key">facebook : </span><span>{{customerDetail.extendInfo.facebook}}</span></Row>
        <Row v-if="customerDetail.extendInfo.twitter!=''&&customerDetail.extendInfo.twitter!=null" ><span class="tiy_key">twitter : </span><span>{{customerDetail.extendInfo.twitter}}</span></Row>
        <Row v-if="customerDetail.extendInfo.instagram!=''&&customerDetail.extendInfo.instagram!=null" ><span class="tiy_key">instagram : </span><span>{{customerDetail.extendInfo.instagram}}</span></Row>
        <Row v-if="customerDetail.extendInfo.pinterest!=''&&customerDetail.extendInfo.pinterest!=null" ><span class="tiy_key">pinterest : </span><span>{{customerDetail.extendInfo.pinterest}}</span></Row>
        <Row >
          <span class="tiy_key">网站标签 :</span>
          <Tag color="success" v-for="(tag,index) in customerDetail.readonlyTags" >{{tag}}</Tag>
          <Tag color="primary" v-for="(tag,index) in customerDetail.tags" >{{tag}}</Tag>
          <Tag color="error" v-for="(tag,index) in customerDetail.otherTags" >{{tag}}</Tag>
        </Row>

      </div>
    </Modal>

    <!--分配员工-->
    <Modal v-model="status.modalAssign.isShow" title="分配负责员工"
           :closable="false" :loading="status.modalAssign.isLoading" @on-ok="assignEmployee()" ok-text="分配">
      <RadioGroup vertical v-model="tParam.selectedEmployee">
        <Radio :label="item" v-for="item in employeeList">
          <Icon type="social-apple"></Icon>
          <span>{{item.userName}}</span>
        </Radio>
      </RadioGroup>

    </Modal>

    <Modal v-model="status.modalTag.isShow" title="选择标签"
           :closable="false"  @on-ok="assignTags()" ok-text="确定" :styles="{width:'40%'}" >
      <div>
        <span><strong>分类标签</strong></span>
        <CheckboxGroup  v-model="tParam.selectedTags">
          <template v-for="categoryTag in customerTags">
          <Checkbox  v-for="item in categoryTag" style="margin: 0.3rem 0.5rem" :label="item"></Checkbox><br/>
          </template>
        </CheckboxGroup>
      </div>
      <div style="margin-top:1rem">
        <span><strong>其他标签</strong></span>
        <CheckboxGroup  v-model="tParam.selectedOtherTags">
            <Checkbox v-for="item in otherTags" :label="item" style="margin: 0.3rem 0.5rem"></Checkbox><br/>
        </CheckboxGroup>
      </div>
    </Modal>

    <Modal v-model="status.modalSearchTag.isShow" title="选择标签"
           :closable="false"  @on-ok="assignSearchTags()" ok-text="确定" :styles="{width:'40%'}" >
      <div v-if="status.modalSearchTag.type==1" >
        <RadioGroup  v-model="status.modalSearchTag.selectedTags">
          <template v-if="status.modalSearchTag.type==1" v-for="categoryTag in status.modalSearchTag.tagData">
            <Radio  v-for="item in categoryTag" :label="item"></Radio><br/>
          </template>
        </RadioGroup>
      </div>
      <div v-if="status.modalSearchTag.type==9" >
        <RadioGroup  v-model="status.modalSearchTag.selectedOtherTags">
          <Radio v-for="item in otherTags" :label="item"></Radio>
        </RadioGroup>
      </div>
    </Modal>



  </div>

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/tCustomerManege/tCustomerManege_data";
  import {
    init,
    searchService,
    saveBatchCustomers,
    queryCustomerOpRecord,
    saveCustomerOpRecord,
    saveCustomer,
    changeCustomerState,
    getCustomerInfo,
      getEmployees,
      assignEmployee
  } from "./js/tCustomerManege/tCustomerManege_funs"
  import {isNotEmpty} from "../js/commonUtils";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    components: {KeyValueView, ICol},
    data(){
      return {
        tRole: {//权限
          OPERATIONS_3_101: "OPERATIONS-3-101",
          OPERATIONS_3_102: "OPERATIONS-3-102",
          OPERATIONS_2_201: "OPERATIONS_2_201",
          OPERATIONS_3_203: "OPERATIONS-3-203",
          OPERATIONS_3_202: "OPERATIONS-3-202",
          OPERATIONS_3_205: "OPERATIONS-3-205",
        },
        tPage: tiyData.tPage,
        tParam: tiyData.tParams,
        status: tiyData.tStatus,
        searchParams: tiyData.tParams.searchInfo,
        userList: tiyData.tData.userList,
        customerDetail: tiyData.tParams.customerInfo,
        opRecordList: tiyData.tData.opRecordList,
        //字典 推广用户状态
        targetCustomerStateDict: this.$store.getters.dictionaries.targetCustomerStateDict,
        customerOperation: this.$store.getters.dictionaries.customerOperation,
        customerFilterOperation: tiyData.customerFilterOperation(this),//普通员工可以操作的只有 站内信 邮件相关的 过滤条件为 > 500
        tableTitles: tiyData.tableTitles(this),
        employeeList : tiyData.tData.employeeList,
        customerTags: [["beauty","nails","Hair style","make up tool","Health&Bath","eye lashes"],
            ["女装","女鞋","女包 ","泳衣","内衣和睡衣","运动服","美妆"],
            ["男装","男鞋","男包"],["童装","童鞋","玩具","学习办公用品","亲子装"],
            ["节日用品","礼服婚纱","户外用品"],["饰品","礼品"],
            ["厨房用品","家居收纳","手机配件","宠物用品","健身用品","口罩"],
            ["配饰","配饰-眼镜","配饰-手表"],
            ["食品","药品","手机", "家具","饮料", "咖啡"],
            ["其他不匹配"]],
        otherTags:['站内信长度限制','客户限制推送'],
        selectedIds: [],
        selectedAll: false,
        selectedPart: false,
      }
    },
    computed: {

      filterStateList(){
        let stateList =  this.$store.getters.dictionaries.targetCustomerStateDict;
        let result =  this._.filter(stateList,function (item) {
          return item.value !==100 && item.value !==110;
        });
        return  result
      },
        hasSelectItems(){
            // return tiyData.tParams.selectedCustomers.length > 0;
          return this.selectedIds.length > 0;
        }
    },
    methods: {
      prepareRecord(item){
        var title = item.createTime+'      操作人 : '+ item.employeeName;
        if(item.notes!==''){
          title = title + ' 操作说明 : '+item.notes
        }
      return title
      },

      search(){
        tiyData.tPage.currentPage = 1;
        searchService(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        searchService(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        searchService(this, tiyData);
      },
      customerSelectedChanged(currentRow, oldCurrentRow){
        tiyData.tParams.selectedCustomers = currentRow;
      },
      batchSetStateInvalid(){ //200 有效  300无效

        this.$Modal.confirm({
          title: "确认",
          content: "确认批量设置已选择的用户为无效状态",
          onOk: () => {
            saveBatchCustomers(this, tiyData)
          }
        })
      },
      setStateInvalid(index){
        let user = this.userList[index];
        let msg = "确认设置编号为" + user.number + "的客户";
        if(user.name){
            msg += user.name;
        }
        msg += " 为无效状态?";
        this.$Modal.confirm({
          title: "确认",
          content: msg,
          onOk: () => {
            tiyData.tParams.changeStateCustomerInfo.id = user.id;
            tiyData.tParams.changeStateCustomerInfo.number = user.number;
            changeCustomerState(this, tiyData, 300);
          }
        })
      },
      setExternalEmailShow(id,state){
        // tiyData.tParams.customerInfo.state = 0;
        tiyData.tParams.customerInfo.isSendLetter = false;
        getCustomerInfo(this, tiyData, id, state);

        if(tiyData.tParams.customerInfo.customerName){
            tiyData.tStatus.modalEmail.hasName = true;
        } else {
            tiyData.tStatus.modalEmail.hasName = false;
        }
          tiyData.tStatus.modalEmail.isShow = true;
      },
      setExternalEmail(){
        // tiyData.tParams.customerInfo.state = 0;
        saveCustomer(this, tiyData, true)
      },
      opRecordShow(index){
        init(this, tiyData)
        let user = this.userList[index];
        tiyData.tParams.opRecordQuery.customerId = user.id;
        tiyData.tParams.opRecordSave.customerId = user.id;
        tiyData.tParams.opRecordSave.customerName = user.name;
        queryCustomerOpRecord(this, tiyData);
      },
      saveCustomerOpRecord(){
        saveCustomerOpRecord(this, tiyData);
      },
      getCustomerDetail(id, state){
        getCustomerInfo(this, tiyData, id, state)
          tiyData.tStatus.modalCustomerInfo.isShow = true;
      },
      onchangeSendLetter(status){
        tiyData.tParams.customerInfo.isSendLetter = status;
      },
      setEffective(index){
        let user = this.userList[index];
          let msg = "确认设置编号为" + user.number + "的客户";
          if(user.name){
              msg += user.name;
          }
          msg += " 为有效客户？";
        this.$Modal.confirm({
          title: "确认",
          content: msg,
          onOk: () => {
            tiyData.tParams.changeStateCustomerInfo.id = user.id;
            tiyData.tParams.changeStateCustomerInfo.number = user.number;
            changeCustomerState(this, tiyData, 200);
          }
        })
      },
      sortChanged(column, key, order){
        tiyData.tPage.total = 1;
        tiyData.tPage.startIndex = 0;
        tiyData.tPage.currentPage = 1;
        if ('normal' == column.order) {
          tiyData.tParams.searchInfo.orderBy = '';
        } else {
          tiyData.tParams.searchInfo.orderBy = column.key + ' ' + column.order;
        }
        searchService(this, tiyData);
      },
        showAssignModal(){ //显示分配员工对话框
            let self = this;
            let ret = true;
            let errorMsg = "";
            tiyData.tParams.selectedCustomers.splice(0);
            for(let i=0; i<this.userList.length; i++) {
              let user = this.userList[i];
              if (this.selectedIds.includes(user.id)) {
                tiyData.tParams.selectedCustomers.push(user);
              }
            }
            for(let i = 0; i < tiyData.tParams.selectedCustomers.length; i++) {
                let user = tiyData.tParams.selectedCustomers[i];
                if (user.state !== 120) {
                    ret = false;
                    errorMsg = "只能选择待开发的客户！";
                    break;
                }
            }
            if(!ret){
                this.$Modal.error({
                    title: "error",
                    content: errorMsg,
                    onOk : function(){
                        self.$refs["userInfo"].selectAll(false);
                        tiyData.tParams.selectedCustomers = [];
                    }
                });
                return;
            }
            tiyData.tStatus.modalAssign.isShow = true;
            // getEmployees(this, tiyData, tiyData.tStatus.modalAssign); //查询员工
        },
        employeeSelectedChanged(currentRow){
            tiyData.tParams.selectedEmployee = currentRow;
        },
        assignEmployee(){
            if(!tiyData.tParams.selectedEmployee.id){
                this.$Modal.error({
                    title: "error",
                    content: "请选择负责的员工！"
                });
                return;
            }
            assignEmployee(this, tiyData);
        },
        showTagModal(){
            tiyData.tParams.selectedTags = tiyData.tParams.customerInfo.tags;
            tiyData.tParams.selectedOtherTags = tiyData.tParams.customerInfo.otherTags;
            tiyData.tStatus.modalTag.isShow = true;
        },
        assignTags(){
            tiyData.tParams.customerInfo.tags = tiyData.tParams.selectedTags;
            tiyData.tParams.customerInfo.otherTags = tiyData.tParams.selectedOtherTags;
        },
        deleteTag(index,type){
          if(type==2){
              tiyData.tParams.customerInfo.tags.splice(index,1)
          }else if(type=3){
              tiyData.tParams.customerInfo.otherTags.splice(index,1)
          }
        },
        addContact(){
            tiyData.tParams.contact.customerId=tiyData.tParams.customerInfo.id;
            tiyData.tParams.contact.address="";
            tiyData.tParams.contact.country="";
            tiyData.tParams.contact.phone="";
            tiyData.tParams.contact.postalCode='';
            tiyData.tParams.contact.index=-1;
            tiyData.tParams.contact.sequence=tiyData.tParams.customerInfo.contacts.length+1;
            tiyData.tStatus.modalContact.isShow = true;
        },
        applyContact(){
            this.$refs["paramContact"].validate((valid) => {
            if (valid) {
                if(tiyData.tParams.contact.index==-1){
                    tiyData.tParams.customerInfo.contacts.push(Object.assign({},tiyData.tParams.contact));
                }else{
                    tiyData.tParams.customerInfo.contacts.splice(tiyData.tParams.contact.index,1,Object.assign({},tiyData.tParams.contact));
                }
                tiyData.tStatus.modalContact.isShow = false;
             }else{
                tiyData.tStatus.modalContact.isLoading = false;
                    this.$nextTick(function () {
                        tiyData.tStatus.modalContact.isLoading = true;
                    });
            }
            }
             );
        },
        editContact(index){
            tiyData.tStatus.modalContact.isShow = true;
            tiyData.tParams.contact = Object.assign({},tiyData.tParams.customerInfo.contacts[index]);
            tiyData.tParams.contact.index=index;
        },
        deleteContact(index){
            tiyData.tParams.customerInfo.contacts.splice(index,1);
        },
        showSearchModal(type){
            tiyData.tStatus.modalSearchTag.type = type;
            if(type==1){
                tiyData.tStatus.modalSearchTag.tagData = this.customerTags;
            }else if(type==9){
                tiyData.tStatus.modalSearchTag.tagData = this.otherTags;
            }
            tiyData.tStatus.modalSearchTag.isShow = true;
        },
        assignSearchTags(){
          if(tiyData.tStatus.modalSearchTag.type==1){
              tiyData.tParams.searchInfo.tags =tiyData.tStatus.modalSearchTag.selectedTags;
          }else if(tiyData.tStatus.modalSearchTag.type==9){
              tiyData.tParams.searchInfo.otherTags = tiyData.tStatus.modalSearchTag.selectedOtherTags;
          }
        },
      formatContactUrl() {

      },
      hasAuthority(code) {
        return this.$authority(code);
      },
      isNotEmpty(val) {
        return isNotEmpty(val);
      },
      clickSelectAll(selected) {
        if(selected) {
          let ids = this.userList.filter(item => item.state != 300 && item.state != 310).map(item => {return item.id});
          this.selectedIds.splice(0, this.selectedIds.length, ...ids);
        }else{
          this.selectedIds.splice(0);
        }
      },
    },
    created(){
      init(this, tiyData);
      // searchService(this, tiyData);
      getEmployees(this, tiyData);
    },
    watch: {
      "selectedIds": {
        handler(newVal, oldVal) {
          if(newVal.length > 0) {
            if(newVal.length == this.userList.filter(item => item.state != 300 && item.state != 310).length) {
              this.selectedAll = true;
              this.selectedPart = false;
            }else{
              this.selectedAll = false;
              this.selectedPart = true;
            }
          }else{
            this.selectedAll = false;
            this.selectedPart = false;
          }
        },
      }
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .form_input {
    width: 180px;
    margin-right: 10px;

  }

  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
    padding: 0.5rem 1rem;
  }
  .modal_base_div {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    border: dotted thin #d1d1d1
  }

  .modal_base_div_title {
    text-align: left;
    margin-bottom: 10px
  }

  .data-list {
    margin: 1rem 0rem;
    line-height: 25px;
    .list-item {
      .flex-colum-wrap;
      justify-items: left;
      align-items: start;
      .item-checkbox {
        display: inline-block;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: top;
      }
      .item-img {
        width: 130px;
        text-align: center;
        display: inline-block;
      }
      .item-top{
        width: 100%;
        margin-bottom: 5px;
        .flex-row-wrap;
        justify-content: left;
      }
      .item-content {
        margin-bottom: 35px;
        text-align: left;
      }
      .item-bottom{
        //position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        display: block;
        //padding: 0 1rem 0.5rem 0;
        text-align: right;
        button {
          margin-left: 0.5rem;
        }
      }
    }
  }
</style>
